<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head dispfx flxhc flxvc">
        <embed src="./image/返回.svg" type="">
        <p>商品列表</p>
    </div>
    <!-- 1 -->
    <div class="one dispfx flxvc flxspb">
        <embed src="./image/放大镜.svg" type="">
        <input type="text" placeholder="输入您要搜索的宝贝..">
        <div class="one-1">
            <img src="./image/home-msg.png" alt="">
            <span></span>
        </div>
    </div>
    <!-- 2 人气 销量 价格 -->
    <div class="two">
        <ul class="two-ul dispfx flxspb">
            <li class="two-you" style="color: #2DA3E8;">人气</li>
            <li class="two-you">销量</li>
            <li class="jia">
                <span>价格</span>
                <embed src="./image/下箭头.svg" type="">
                <ul class="two-ul-ul" style="display: none;">
                    <li class="gao">由高到低</li>
                    <li class="di">由低到高</li>
                </ul>

            </li>
        </ul>
    </div>


    <!-- 5 -->
    <div class="five dispfx flxspb">
        <img src="./image/home-new.png" alt="" class="five-tu1">
        <img src="./image/home-promotion.png" alt="" class="five-tu2">
        <span class="five-xian1"></span>
        <span class="five-xian2"></span>
        <div class="five-1">
            <img src="./image/2-商品分类列表_04.png" alt="">
            <p style="font-size: 0.32rem; margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白洗面奶</p>
            <p><span class="five-1-1">￥169</span><span class="five-1-2">￥220</span></p>
        </div>
        <div class="five-2">
            <img src="./image/2-商品分类列表_04.png" alt="">
            <p style="font-size: 0.32rem;  margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白嫩肤霜</p>
            <p><span class="five-2-1">￥189</span><span class="five-2-2">￥220</span></p>
        </div>
    </div>
    <div class="five dispfx flxspb">
        <!-- <img src="./image/home-new.png" alt="" class="five-tu1">
        <img src="./image/home-promotion.png" alt="" class="five-tu2"> -->
        <span class="five-xian1"></span>
        <span class="five-xian2"></span>
        <div class="five-1">
            <img src="./image/2-商品分类列表_08.png" alt="">
            <p style="font-size: 0.32rem; margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白洗面奶</p>
            <p><span class="five-1-1">￥169</span><span class="five-1-2">￥220</span></p>
        </div>
        <div class="five-2">
            <img src="./image/2-商品分类列表_09.png" alt="">
            <p style="font-size: 0.32rem;  margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白嫩肤霜</p>
            <p><span class="five-2-1">￥189</span><span class="five-2-2">￥220</span></p>
        </div>
    </div>
    <div class="five dispfx flxspb">
        <!-- <img src="./image/home-new.png" alt="" class="five-tu1">
        <img src="./image/home-promotion.png" alt="" class="five-tu2"> -->
        <span class="five-xian1"></span>
        <span class="five-xian2"></span>
        <div class="five-2">
            <img src="./image/2-商品分类列表_09.png" alt="">
            <p style="font-size: 0.32rem;  margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白嫩肤霜</p>
            <p><span class="five-2-1">￥189</span><span class="five-2-2">￥220</span></p>
        </div>
        <div class="five-1">
            <img src="./image/2-商品分类列表_08.png" alt="">
            <p style="font-size: 0.32rem; margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白洗面奶</p>
            <p><span class="five-1-1">￥169</span><span class="five-1-2">￥220</span></p>
        </div>
    </div>


</body>
<script>
    var lil = document.querySelectorAll('.two-ul li')
    $('.jia').click(function (e) {
        var te = $('.jia span').text()
        if (e.target.className == 'gao') {
            $('.two-ul-ul').css('display', 'none')
            $('.jia span').text(e.target.innerText)
            e.target.innerText = te
            return
        }
        if (e.target.className == 'di') {
            $('.two-ul-ul').css('display', 'none')
            $('.jia span').text(e.target.innerText)
            e.target.innerText = te
            return
        }

    })

    $('.two-ul').click(function (e) {
        if (e.target.nodeName == 'SPAN') {
            $('.two-ul-ul').css('display', 'block')
        } else {
            $('.two-ul-ul').css('display', 'none')
        }

        if (e.target.className == 'two-you') {
            $('.jia span').css('color', '#444444')
            for (var i = 0; i < lil.length; i++) {
                lil[i].style.color = '#444444'
            }
            if (e.target.nodeName == 'LI') {
                e.target.style.color = '#2DA3E8'
            }
        }

    })
</script>

</html>